<template>
  <div>
    耳号：<el-input style="width: 150px;" v-model="form.earNumber"></el-input>&nbsp;
    对应品种：<el-select v-model="form.breedId" placeholder="请选择品种" size="large"style="width: 150px" clearable >
      <el-option v-for="item in breedDatas":key="item.breedId" :label="item.breedName":value="item.breedId" />
    </el-select>&nbsp;
    对应出生状态：<el-select v-model="form.brithdayStatusId" placeholder="请选择出生状态" size="large"style="width: 150px" clearable>
      <el-option label="活羔" :value="1" ></el-option>
      <el-option label="死羔" :value="2" ></el-option>
      <!-- <el-option v-for="item in birthdayStatusDatas":key="item.brithdayStatusId" :label="item.brithdayStatus":value="item.brithdayStatusId" /> -->
    </el-select>&nbsp;
    使用状态：<el-select v-model="form.useStatus" placeholder="请选择使用状态" size="large"style="width: 150px" clearable>
      <el-option label="已使用":value="1" ></el-option>
      <el-option label="未使用":value="0" ></el-option>
    </el-select>&nbsp;
    <el-button type="success" :icon="Search" @click="getLambEarDatas()"  >查询</el-button>
    <br><br>
    <el-button type="danger" :icon="Plus" @click="router.push('/LambEarTagsAdd')"  >新增</el-button>&nbsp;
    <el-button type="danger" :icon="Delete" :disabled="getSelectNumber<1" @click="addDelete()" >删除</el-button>
    <br><br>
    <hr style="font-size: 20px;" />
    <br />
    <div style="width: 100%;height: 30px;"  >
      
      <h2 style="background-color:lightpink;">&emsp; <el-button type="success" v-if="getSelectNumber>0" :icon="Check" circle />
      <el-button type="danger" v-else :icon="WarningFilled" circle />&nbsp;已选择 {{ getSelectNumber }} 条</h2>
    </div>
      <div class="el-table-container" style=" height: 400px;position: relative">
        <el-table :header-cell-style="{ height: '100px', fontSize: '18px',color:'black' , backgroundColor: 'antiquewhite' }" :data="lambEarDatas" style="border-collapse: collapse;width: 100%;"  @selection-change="handleSelectionChange" >
          <el-table-column type="selection"  width="55" />
          <el-table-column prop="lambEarId" label="序号" width="150" >
             <template #default="{$index}" >
        {{ $index+1 }}
      </template>
          </el-table-column>
          <el-table-column prop="earNumber" label="耳号" width="150" />
          <el-table-column prop="breedName" label="对应品种" width="150" />
          <el-table-column prop="brithdayStatus" label="对应出生状态" width="180" />
          <el-table-column prop="putInDate" label="入库日期" width="200" >
            <template v-slot="scope" >
              {{ scope.row.putInDate==null?"":scope.row.putInDate.substring(0,19).replace("T"," ") }}
            </template>
          </el-table-column>
          <el-table-column prop="createName" label="入库操作人" width="150" />
          <el-table-column prop="useStatus" label="使用状态" width="150" >
            <template v-slot="scope" >
              <el-tag type="danger" v-if="scope.row.useStatus" >已使用</el-tag>
              <el-tag type="success" v-else >未使用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="操作" width="180" >
            <template v-slot="scope" >
 <el-button link type="primary" >编辑</el-button>
            <el-button link type="primary" @click="deleteLambEar(scope.row.lambEarId)" >删除</el-button>
            </template>
           
          </el-table-column>
        </el-table>

    </div>

  </div>

</template>

<script setup lang="ts">
  import {
  Delete,
  Check,
  Edit,
  Search,
  Plus,
  Setting,
  SuccessFilled,WarningFilled
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute();
const router = useRouter();


const form = reactive({
  earNumber: '',
  brithdayStatusId: '',
  breedId: '',
  useStatus:''
})

//获取对应品种信息
const breedDatas:any = ref([])
const getBreedDatas = () => {
  axios.get("http://localhost:5039/api/EarsTag/SearchLambBreed").then(res => {
    breedDatas.value=res.data.data
  })
}

//获取对应出生状态信息
const birthdayStatusDatas:any  = ref([])
const getBirthdatStatusDatas= () => {
  axios.get("http://localhost:5039/api/EarsTag/SearchBirthdayStatus").then(res => {
    birthdayStatusDatas.value=res.data.data
  })
}

//获取产羔耳标信息
const lambEarDatas: any = ref([])
const getLambEarDatas = () => {
  const result: any = ref({})
  result.earNumber = form.earNumber
  result.brithdayStatusId = form.brithdayStatusId || 0
  result.breedId = form.breedId || 0
  result.useStatus =form.useStatus||-1
  console.log(result)
  axios.post("http://localhost:5039/api/EarsTag/SearchLambEars", result).then(res => {
    lambEarDatas.value=res.data.data
  })
}

//多选
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}

//计算属性
const getSelectNumber = computed(() => {
  return multipleSelection.value.length
})

//钩子函数
onMounted(() => {
  getBreedDatas();
  getBirthdatStatusDatas();
  getLambEarDatas();
})

//批量删除
const addDelete = () => {

   ElMessageBox.confirm(
    '确认要删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      var request: any = ref({})
  var idsArry:any = [];
  multipleSelection.value.forEach((c: any) => {
    idsArry.push(c.lambEarId)
  })
  request.ids = idsArry.toString();
  axios.delete("http://localhost:5039/api/EarsTag/AllDeleteLambEars",{
         data: request,
        headers: {'Content-Type': 'application/problem+json;charset=UTF-8'}
  }).then(res => {
    if (res.data.code > 0) {
      ElMessage.success("删除产羔信息成功");
      getLambEarDatas();
    } else {
      ElMessage.error("删除失败，再试试");
      return;
    }
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

//删除
const deleteLambEar = (lambEarId: number) => {
  ElMessageBox.confirm(
    '确认要删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      var request: any = ref({})
  request.ids = lambEarId.toString();
  axios.delete("http://localhost:5039/api/EarsTag/AllDeleteLambEars",{
         data: request,
        headers: {'Content-Type': 'application/problem+json;charset=UTF-8'}
  }).then(res => {
    if (res.data.code > 0) {
      ElMessage.success("删除产羔信息成功");
      getLambEarDatas();
    } else {
      ElMessage.error("删除失败，再试试");
      return;
    }
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}


</script>
<style scoped>
  .demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
    border-top: 3px solid red;
    /* 设置顶部边框为3px宽度的红色 */
    padding: 10px;
    text-align: center;
}

/* 设置 td 的样式 */

table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    height: 60px;
    width: 150px;
     white-space: nowrap;  /* 防止内容换行 */
}

/* 可选：为 table 添加样式 */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}


 
/*______________________________________________________*/

.el-table-container {
  max-width: 100%;
  overflow-x: auto;  /* 启用水平滚动 */
  margin: 20px 0;  /* 设置容器的外边距 */
}
</style>
